<template>
	<div class="zh-database">
		<nav-header>
            <div class="zh-h5-nav" v-show="$store.state.platformInformation">
				<div
					:class="activePanel === 'platform-check' ? 'active' : ''"
					@click="changePanel('platform-check')">本平台</div>
				<div 
					:class="activePanel === 'push-check' ? 'active' : ''" 
					@click="changePanel('push-check')">推送审核</div>
			</div>
        </nav-header>
        <transition name="fade" mode="out-in" v-if="activePanel === 'platform-check'" >
            <div class="zh-table"
                v-loading="testLoading.status"
                :element-loading-text="testLoading.txt">
                <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
                        <div style="display: inline-block" v-if="$store.state.platformInformation">
                            <div class="open-width" style="width: 120px">
                                <el-select v-model="listParam.platform_id" filterable placeholder="来源学校/教育局">
                                    <el-option
                                        v-for="item in platformList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="open-width">
                                <el-input v-model="listParam.keyword" placeholder="试题名称"></el-input>
                            </div>
                        </div>
                        <div style="display: inline-block" v-else>
                            <div class="open-width">
                                <el-select v-model="listParam.study_section_id" filterable placeholder="请选择" @change="changeGrade">
                                    <el-option
                                    v-for="item in orgLevel2"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="open-width">
                                <el-select v-model="listParam.grade_id" filterable  placeholder="请选择">
                                    <el-option
                                    v-for="item in gradeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="open-width">
                                <el-select v-model="listParam.subject_id" filterable placeholder="请选择">
                                    <el-option
                                    v-for="item in orgSubject"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <el-button type="primary" @click="getList">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>                 
                    </div>
                    <!-- <div class="zh-open-right fr" v-if="!$store.state.checkLevel">
                        <el-button type="text" @click="toLink('/resources/exam/database-push-history')">推送历史</el-button>
                    </div> -->
                </div>
                <div class="zh-select-type">
                    <div class="clear">
                        <div class="stl fl">题型：</div>
                        <div class="str fl">
                            <template v-for="item in questionTypeData">
                                <span 
                                    v-if="checkShowType(item.id)"
                                    :key="item.id"
                                    :class="{active : listParam.type_id === item.id}"
                                    @click="selected(item.id)"
                                    >
                                    {{item.name}}
                                </span>
                            </template>
                        </div>
                    </div>
                    <div class="clear">
                        <div class="stl fl">难度：</div>
                        <div class="str fl">
                            <span 
                                v-for="item in difficultyData" 
                                :key="item.id"
                                :class="{active2 : listParam.difficulty_id === item.id}"
                                @click="selected2(item.id)"
                                >
                                {{item.name}}
                            </span>
                        </div>
                    </div>
                    <!-- <div class="clear">
                        <div class="stl fl">类型：</div>
                        <div class="str fl">
                            <span 
                                v-for="item in sourceData" 
                                :key="item.id"
                                :class="{active3 : listParam.source_id === item.id}"
                                @click="selected3(item.id)"
                                >
                                {{item.name}}
                            </span>
                        </div>
                    </div> -->
                </div>
                <div class="zh-select-type-content">
                    <div class="list-option">
                        <div class="list-option-title clear">
                            <div class="option-title-left fl">
                                <span 
                                    v-for="item in statusArr" 
                                    :key="item.value"
                                    :class="{active4 : listParam.status === item.value}"
                                    @click="selected4(item.value)"
                                    >
                                    {{item.name}}
                                </span>
                            </div>
                            <div class="option-title-right fr">共<span style="color:red"> {{total_number}} </span>题</div>
                        </div>
                        <!-- 循环 -->
                        <template v-for="(item, inx) in listData">
                            <div class="list-option-content" :key="inx">
                                <div class="list-option-explanation clear">
                                    <div class="option-explanation-left fl">
                                        <span>{{++inx}}.{{item.question_type}}</span>
                                        <span class="left-color-hui">|</span>
                                        <span>难度：{{item.difficulty}}</span>
                                        <span v-html="getStatusTxt(item.status)" :style="getStatusColor(item.status)"></span>
                                    </div>
                                    <div class="option-explanation-right fr">
                                        <el-popover
                                        placement="left-end"
                                        width="600"
                                        trigger="click"
                                        >
                                            <div class="list-option-answer">
                                                <ul>
                                                    <li v-if="[1, 2, 4].includes(item.type_base_id)">
                                                        <span>答案：</span>
                                                        <span class="answer-first color">{{renderAnswer(item.answer)}}</span>
                                                    </li>
                                                    <li>
                                                        <span>统计：</span>
                                                        <span class="answer-first">本题共被作答
                                                            <span class="answer-second">{{item.question_info.answer_count}}</span>
                                                            次，正确率为
                                                            <span class="answer-third">{{item.question_info.true_probability}}%</span>
                                                        </span>
                                                    </li>
                                                    <li class="clear">
                                                        <span class="fl">解析：</span>
                                                        <span v-if="item.pattern === 1" class="answer-first fl" v-html="getImg(item.resolve)"></span>
                                                        <span v-else class="answer-first fl">
                                                            <img :src="host_addr + item.resolve_image_path" style="max-width:90%" />
                                                        </span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <el-button slot="reference" type="text">查看解析</el-button>
                                        </el-popover>
                                        <span v-if="parseInt(item.status) === 3">
                                            <el-button 
                                                type="primary" size="mini" 
                                                style="margin-left: 30px"
                                                @click="approveQuestion(item)"
                                            >
                                                批准
                                            </el-button>
                                            <el-button 
                                                type="danger" size="mini"
                                                @click="rejectQuestion(item)"
                                            >
                                                拒绝
                                            </el-button>
                                        </span>
                                        <template v-if="$store.state.checkLevel">
                                            <span v-if="parseInt(item.status) === 2">
                                                <input style="margin-left: 30px" type="checkbox" :id="item.id" :value="item.id" v-model="checkedNames">
                                                <el-button type="danger" size="mini" @click="delQuestion(item)">删除</el-button>
                                            </span>
                                            <span v-if="parseInt(item.status) === 1">
                                                <!-- <input style="margin-left: 30px" type="checkbox" :id="item.id" :value="item.id" v-model="checkedNames"> -->
                                                <input style="margin-left: 30px" type="checkbox" :id="item.id" :value="item.id" v-model="checkedPushNames">
                                                <el-button type="danger" size="mini" @click="delQuestion(item)">删除</el-button>
                                                <el-button v-if="platform && !$store.state.checkLevel" type="primary" size="mini" @click="pushUpQuestion(item)">推上级</el-button>
                                                <el-button v-if="$store.state.platformInformation" type="primary" size="mini" @click="pusDownQuestion(item)">推下级</el-button>
                                            </span>
                                        </template>
                                    </div>
                                </div>
                                <ul class="list-option-list">
                                    <li v-if="item.pattern === 1"  v-html="getImg(item.content)"></li>
                                    <li v-else>
                                        <img :src="host_addr + item.content_image_path" style="max-width:90%" />
                                    </li>
                                    <template v-for="item2 in item.option">
                                        <li v-if="item.type_base_id == 4" v-html="item2.name"></li>
                                        <li v-else class="list-sec-title" v-html="item2.name+'.' + getImg(item2.value)"></li>
                                    </template>
                                </ul>
                            </div>	
                        </template>
                    </div>
                </div>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listParam.page_index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="listParam.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    v-show="total_number > 10"
                    :total="total_number">
                </el-pagination>
            </div>
        </transition>
        <transition name="fade" mode="out-in" v-if="activePanel === 'push-check'" >
            <zh-database-push-check />
        </transition>
        <!-- 推下级begin -->
		<el-dialog
			title="推下级"
			:visible.sync="pushLowFlag"
			v-if="pushLowFlag"
			width="600px"
			:close-on-click-modal="false"
        >
			<push-low-win @listenPushLow="getPushLowList"></push-low-win>
			<span slot="footer" class="dialog-footer">
				<el-button @click="pushActive()">取 消</el-button>
				<el-button type="primary"  @click="pushActive(1)">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 推下级end -->
	</div>
</template>
<script>
    import pushLowWin from '@/components/common/push-low-win';

  	export default {
        components: {
			pushLowWin
		},
	    data() {
		    return {
					app_code: sessionStorage.getItem('CheckSchoolAppCode'),
					activePanel: 'platform-check',
					host_addr: sessionStorage.getItem("host_addr"),
					checkedNames: [], /* 保持删除的id */
					checkedPushNames: [], /* 保持推上级/推下级的id */
					platform: '', /* 可推送上级 */
					pid: '', /* 可推送上级id */
					pushUpList: [],
					pushLowFlag: false,/*推下级弹窗 */
					pushLowObj: null,/*推下级对象 */
					pushLowStatus: null,/*记录是否批量推下级*/
					selSchoolList: [],/*选择的下级列表 */
					listData:[],
		    	testLoading:{
		    		status:false,
		    		txt:'加载数据...'
		    	},
		    	listParam:{
						type:'review',
						platform_id: null,
						keyword: null,
						study_section_id:null,
						grade_id:null,
						subject_id:null,
						type_id:null,
						source_id:null,
						difficulty_id:null,
						status:3,
						page_index:1,
						page_size:10,
					},
					orgLevel2Param:{ //获取学段参数
						level:2,
						pid:null,
						direction:'balance',
				  },
					orgLevel3Param:{ //获取年纪参数
						level:3,
						pid:null,
						direction:'balance',
					},
					orgLevel2:[{id:null,name:'全部学段'}],
					orgLevel3:[{id:null,name:'全部年级'}],
					orgSubject:[{id:null,name:'全部科目'}],
					gradeList: [],
					subjectParam:{ //获取科目,版本，参数
						type:2,
						org_id:null,
						status:1,
					},
					relationParam:{
							study_section_id:'',
							subject_id:'',
		      },
					total_number:0,
					difficultyData:[],
					// sourceData:[],
					typeIds:[],
					questionTypeData: [],
					statusArr: [
						{
							value: 3,
							name: '未审核',
						},
						{
							value: 1,
							name: '已通过',
						},
						{
							value: 2,
							name: '已拒绝',
						},
					],
					statusDrr: {
						3:{txt:'未审核',color:'#f6a50c'},
						1:{txt:'已通过',color:'#4bd5b0'},
						2:{txt:'已拒绝',color:'#e42929'}
					},
					platform_id: null,
          platformList: [],/*学校/教育局列表 */
			}
		},
		created(){
			this.getType();
			// this.getSource();
			this.getDifficulty();
			this.getOrgLevel2();
			this.getOrgLevel3();
			this.getSubject();
			this.getList();
			if(this.$store.state.platformInformation) {
				this.get_canseeposition();
			}
			if (this.$store.state.platformInformation) {
				this.platform_parent();
			}            
		},
		watch:{
			'listParam.study_section_id':{
	    		handler(newVal,oldVal){
					this.listParam.grade_id = null;
					this.listParam.subject_id = null;

					this.orgLevel3Param.pid = newVal;
					this.getOrgLevel3();

					this.subjectParam.org_id = newVal;
					this.getSubject();
　　　　　　　　}
			},
			'listParam.grade_id':{
	    		handler(newVal,oldVal){
					this.listParam.subject_id = null;

					this.subjectParam.org_id = newVal;
					this.getSubject();
　　　　　　　　}
			},
		},
		methods: {
            /**
             * 切换
             */
			changeGrade(val) {
					this.listParam.grade_id = null;
					
					if (val) {
							this.gradeList = this.orgLevel3.filter(item => item.pid == val);
							this.gradeList.unshift({id:null,name:'全部'})
					} else {
							this.gradeList = deep_clone(this.orgLevel3);
					}
			},
			getImg(content) {
					let data = '';

					if (!is_empty(content)) {
							let temp = content.split('<img src="/public/ueditor/php/upload/image/');

							temp.forEach((item, index) => {
									if (index === 0) {
											data = item;
									} else {
											data = data + '<img src="' + this.host_addr + '/public/ueditor/php/upload/image/' + item;
									}
							})
					}

					return data;
			},
			changePanel(panel) {
					this.activePanel  = panel;
			},
			reset() {
					this.listParam = {
						type:'review',
						platform_id: null,
						keyword: null,
						study_section_id:null,
						grade_id:null,
						subject_id:null,
						type_id:null,
						source_id:null,
						difficulty_id:null,
						status:3,
						page_index:1,
						page_size:10,
					}
					this.gradeList = deep_clone(this.orgLevel3);
					this.getList();
			},
			toLink(link) {
					this.$router.push(link);
			},
			checkShowType(id){
                return true;
				// if( is_empty(id) ){
				// 	return true;
				// }
				// if( !is_empty( this.relationParam.study_section_id) && !is_empty( this.relationParam.subject_id) ){
				// 	if( in_array(id,this.typeIds) ){
				// 		return true;
				// 	}else{
				// 		return false;
				// 	}
				// }else{
				// 	return true;
				// }
			},
			renderAnswer( answer ){
				return (typeof(answer)=='object' && !is_empty(answer))?answer.join(','):answer
			},
			approveQuestion(obj){
				let yes = ( data => {
					let success = (data=>{
						this.$message.success(data.msg);
	            		if( this.listData.length > 0 && this.listParam.page_index > 1){
	            			this.listParam.page_index--;
	            		}
	            		this.getList();
	            	})
	            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
	            	this.$ajax.post('api/test/approve_question',{id:obj.id},{func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定批准该试题为公开试题吗？'});
      },
      platform_parent() { /* 获取可推送上级 */
				const success = res => {
					console.log(res, 9999)
					if (!is_empty(res.data)) {
						this.platform = res.data.name;
						this.pid = res.data.id;
					}
				}
				this.$ajax.get('api/level/platform_parent', { params: {},func: {success: success}})
			},
			/* 删除已通过或拒绝的试题 start */
			delQuestion(obj) {
					let ids = null;
					let temp = null;

					if (obj.status === 1) {
							temp = this.checkedPushNames;

					} else {
							temp = this.checkedNames;
					}

					if (temp.length === 0) {
							ids = obj.id;
					} else {
							ids = temp.join(',');
					}

					let yes = ( data => {
						this.delAll(ids);
					})
					let cancel = ( data => {})
					this.e_confirm({yes: yes, cancel: cancel, txt:' 确定将试题删除吗？'}); 
			},
			delAll(ids) {
					let success = (data => {
							this.checkedNames = [];
							this.checkedPushNames = [];
							this.$message.success(data.msg);
							this.getList();
					})

					this.$ajax.delete('api/test/question', {params: {id: ids}, func: {success: success}})
			},
						/* 删除已拒绝的试题 end */
						/* 批量试题推上级 start */
					pushUpQuestion(obj) {
							let ids = null;
							if (this.checkedPushNames.length === 0) {
									ids = obj.id;
							} else {
									ids = this.checkedPushNames;
							}

							let title = `是否要将资源推送至${this.platform}？（需经过审核）`;
							this.$confirm(title, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
									this.pushUpAll(ids);
							}).catch(() => {
								this.$message({
									type: 'info',
									message: '已取消推送'
								});          
							});
					},
					pushUpAll(ids) {
							let params = {
								id: ids,
								res_type: 'test_question',
								school_id: this.pid,
								push_type: 1,
							}
							const success=res=>{
								this.$message.success(res.msg)
								this.checkedPushNames = [];
								this.getList();
							}
							this.$ajax.post("api/level/push_data", params, {
								func: { success: success }
							});
					},
					/* 批量试题推上级 end */
					/* 批量试题推下级 start */
					pusDownQuestion(obj) {
							this.pushLowObj = obj;
							this.pushLowStatus = null;
							this.pushLowFlag = true;
							
							if (this.checkedPushNames.length === 0) {
									this.pushUpList.push(obj.id);
							} else {
									this.pushUpList = this.checkedPushNames;
							}
					},
					getPushLowList(list) {/*获取组件传递列表 */
							this.selSchoolList = list;
					},
					pushLowHide() {/*推下级窗口隐藏 */
						this.pushLowObj = null;
						this.pushLowFlag = false;
					},
					pushActive(flag) {/*推下级执行 */
						if(flag) {
							if(this.selSchoolList.length <= 0) {
								this.$message.error('请选择要推送的下级');
								return;
							}
						let params = {
							id: this.pushUpList,
							res_type: 'test_question',
							school_id: '',
							push_type: 2,
						}
						let arr = [];
						this.selSchoolList.forEach(item=> {
							arr.push(item.id);
						})
						params.school_id = arr.join();
						const success=res=>{
							this.$message.success(res.msg)
							this.pushLowHide();
							this.checkedPushNames = [];
							this.pushUpList = [];
							this.getList();
						}
					this.$ajax.post("api/level/push_data", params, {func: { success: success }});
				} else {
					this.pushLowHide();
				}
			},
            /* 批量试题推下级 end */
			rejectQuestion(obj){
				let yes = ( data => {
					let success = (data=>{
						this.$message.success(data.msg);
	            		if( this.listData.length > 0 && this.listParam.page_index > 1){
	            			this.listParam.page_index--;
	            		}
	            		this.getList();
	            	})
	            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
	            	this.$ajax.post('api/test/reject_question',{id:obj.id},{func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定拒绝该试题为公开试题吗？'});
			},
			getStatusTxt(status){
				return this.statusDrr[parseInt(status)].txt;
			},
			getStatusColor(status){
				return 'color:'+this.statusDrr[parseInt(status)].color;
			},
			getRelation(){
            	let success = (data=>{
            		this.typeIds  = [];
            		if( data.data.length > 0){
            			for (var i = data.data.length - 1; i >= 0; i--) {
            				this.typeIds.push(parseInt(data.data[i].question_type_id));
            			}
            			
            		}
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/test/question_type_relation',{params: this.relationParam,func:{success:success}})
            },	
			getType(){
            	let success = (data=>{
								// console.log(data, 10098)
            		this.questionTypeData = data.data;
            		this.questionTypeData.unshift({id:null,name:'全部'})
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/test/get_question_type',{params: {},func:{success:success}})
            },
			getSource(){
				let success = (data=>{
            		this.sourceData = data.data;
            		this.sourceData.unshift({id:null,name:'全部'})
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/test/test_source',{params: {},func:{success:success}})
			},
			getDifficulty(){
				let success = (data=>{
					// console.log(data)
            		this.difficultyData = data.data;
            		this.difficultyData.unshift({id:null,name:'全部'})
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/test/difficulty',{params: {},func:{success:success}})
			},
			getList(){
				this.testLoading.status = true;
            	let success = (data=>{
								// console.log(data,345)
            		this.testLoading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail =  (data=>{
            		this.testLoading.status = false;
            		this.$message.error(data.msg);
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/test/question',{params: this.listParam,func:{success:success}})
            },
			//获取学段
			getOrgLevel2(){
				if(this.$store.state.checkLevel) {
					this.orgLevel2Param.app_code = this.app_code
				}
				let success = ( data=>{
					console.log(data)
					this.orgLevel2 = data.data;
					this.orgLevel2.unshift({id:null,name:'全部学段'})
				})
				if(this.$store.state.checkLevel) {
					this.$ajax.get('api/network/get_platform_org',{params: this.orgLevel2Param,func:{success:success}})
				}else{
					this.$ajax.get('api/org/org',{params: this.orgLevel2Param,func:{success:success}})
				}
			},
			//获取年级
			getOrgLevel3(){
				if(this.$store.state.checkLevel) {
					this.orgLevel3Param.app_code = this.app_code
				}
				let success = ( data=>{
					this.orgLevel3 = data.data;
					this.orgLevel3.unshift({id:null,name:'全部年级'})
					this.gradeList = deep_clone(this.orgLevel3);
				})
				if(this.$store.state.checkLevel) {
					this.$ajax.get('api/network/get_platform_org',{params: this.orgLevel3Param,func:{success:success}})
				}else{
					this.$ajax.get('api/org/org',{params: this.orgLevel3Param,func:{success:success}})
				}
			},
			//获取科目
			getSubject(){
				if(this.$store.state.checkLevel) {
					this.subjectParam.app_code = this.app_code
				}
				let success = ( data=>{
					this.orgSubject = data.data;
					this.orgSubject.unshift({id:null,name:'全部科目'});
				})
				if(this.$store.state.checkLevel) {
        	this.$ajax.get('api/newlevel/platform_subject',{params: this.subjectParam,func:{success:success}})
				}else{
        	this.$ajax.get('api/cate/subject',{params: this.subjectParam,func:{success:success}})
				}
			},
			
			selected(value){
			  this.listParam.type_id = value;
			  this.getList();
			},
			selected2(value){
			  this.listParam.difficulty_id = value;
			  this.getList();
			},
			selected3(value){
			  this.listParam.source_id = value;
			  this.getList();
			},
			selected4(value){
                this.checkedNames = [];
                this.checkedPushNames = [];
                this.listParam.status = value;
                this.getList();
			},
			handleSizeChange(val) {
				this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
			},
			get_canseeposition() {/*获取学校/教育局列表 */
				const success=res=>{
					this.platformList = res.data.data;
				}
				this.$ajax.get('api/level/get_canseeposition_school', { params: {},func: {success: success}})
			},
		},
	}
</script>
<style lang="scss">
	.zh-database {
        .zh-h5-nav {
            .active {
                color: #fff;
            }
        }

		.zh-select-type,.zh-select-type-content {
			width: 100%;
			margin-top: 30px;
			border: 1px solid #e6e6e6;
		}
		.zh-select-type {
			.clear {
				padding: 5px 0;
				border-bottom: 1px solid #e6e6e6;
				.stl {
					width: 6%;
					padding: 5px 0;
					text-align: center;
				}
				.str {
					width: 94%;
					padding-bottom: 5px;
					span {
						display: inline-block;
						margin-right: 2%;
						padding-top: 5px;
						cursor: pointer;
						&:hover {
							color: #409EFF;
						}
					}
				}
			}
			.clear:last-child {
				border-bottom: none;
			}
		}
		.zh-select-type-content {
			.list-option-title {
				padding: 20px 0;
				.option-title-left {
					margin-left: 10px;
					color: #666;
					span {
						display: inline-block;
						margin-left: 30px;
						cursor: pointer;
						&:hover {
							color: #409EFF;
						}
					}
				}
				.option-title-right {
					margin-right: 15px;
				}
			}
			.list-option-content {
				margin-bottom: 20px;

				.list-option-list {
                    li {
                        padding-left: 30px;
                        padding-right: 30px;
                    }

                    img {
                        max-width: 100%;
                        max-height: 100%;
                        object-fit: cover;
                    }
                }
			}
			.list-option-explanation {
				background-color: #f9f9f9;
				.option-explanation-left {
					padding: 8px 40px;
					span {
						display: inline-block;
						margin-right: 20px;
					}
					.left-color-hui {
						color: #999;
					}
					.left-color {
						color: #f6a50c;
					}
				}
				.option-explanation-right {
					padding-right: 15px;                
				}
				button {
					font-size: 14px;
				}
			}
			.examinationPaper-button {
				padding: 15px 0;
				text-align: center;
			}
		}
		.active,.active2,.active3,.active4 {
		  	color: #409EFF;
		}
	}

    .list-option-answer {      
        .answer-first {
            img {
                max-width: 97%;
                max-height: 100%;
                object-fit: cover;
            }
        }

        ul li:last-child {
            max-height: 82vh;
            overflow-y: auto;

            >span:last-child {
                width: 99%;
            }
        }
    }
    .list-sec-title{
        padding: 3px 0;
        p{
            display: inline;
        }
    }
</style>
